<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        ul,
        li,
        div,
        p,
        h1,
        h2,
        ol {
            margin: 0;
            padding: 0;
        }

        ul,
        li,
        ol {
            list-style: none;
        }

        .content {
            width: 810px;
            margin: 0 auto;
            font-family: "微软雅黑";
        }

        .logo {
            margin: 10px 0;
        }

        .logo span {
            display: inline-block;
           
            width: 60px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            background: #ff0000;
            color: #ffffff;
            text-align: center;
            border-radius: 10px;
            margin-top: 5px;
            margin-right: 10px;
            cursor: pointer;
            font-weight: bold;
        }

        .cartList {
            background: url("./image/shoppingBg.jpg") no-repeat;
            height: 414px;
            overflow: hidden;
        }

        .cartList ul {
            float: right;
            width: 450px;
        }

        .cartList ul:nth-of-type(1) {
            margin-top: 125px;
        }

        .cartList ul:nth-of-type(2) {
            margin-top: 70px;
        }

        .cartList ul li {
            font-family: "微软雅黑";
            font-size: 12px;
            color: #666666;
            text-align: center;
            line-height: 25px;
            float: left;
        }

        .cartList ul li input[name="price"] {
            border: none;
            background: transparent;
            width: 45px;
            text-align: center;
        }

        .cartList ul li input[name="amount"] {
            width: 45px;
            text-align: center;
            border: 1px solid #999999;
            border-left: none;
            border-right: none;
            height: 21px;
        }

        .cartList ul li input[name="minus"],
        .cartList ul li input[name="plus"] {
            height: 25px;
            border: 1px #999999 solid;
            width: 25px;
            text-align: center;
        }

        .cartList ul li:nth-of-type(1) {
            width: 130px;
        }

        .cartList ul li:nth-of-type(2) {
            width: 100px;
        }

        .cartList ul li:nth-of-type(3) {
            width: 130px;
        }

        .cartList ul li p {
            cursor: pointer;
            
        }

        .cartList ol {
            float: right;
            clear: both;
            margin-top: 60px;
        }

        .cartList ol li {
            float: left;
        }

        .cartList ol li:nth-of-type(1) {
            color: #ff0000;
            width: 120px;
        }

        .cartList ol li span {
            display: inline-block;
         
            width: 80px;
            height: 35px;
            line-height: 35px;
            font-size: 14px;
            font-family: "微软雅黑";
            background: #ff0000;
            color: #ffffff;
            text-align: center;
            margin-top: 5px;
            margin-right: 15px;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="logo">
            <img src="./image/dd_logo.jpg"><span onclick="guan()">关闭</span>
        </div>
        <div class="cartList" id="zong">
            <ul>
                <li>¥21.357</li>
                <li><input type="button" name="minus" value="-" onclick="jian()"><input type="text" name="amount"
                        value="1" id="shang"><input type="button" name="plus" value="+" onclick="jia()"></li>
                <li>¥<input type="text" name="price" value="21.90" id="yiqian"></li>
                <li>
                    <p onclick="shou()">移入收藏</p>
                    <p onclick="shan()">删除</p>
                </li>
            </ul>
            <ul>
                <li>¥24.00</li>
                <li><input type="button" name="minus" value="-" onclick="jian1()"><input type="text" name="amount"
                        value="1" id="shang1"><input type="button" name="plus" value="+" onclick="jia1()"></li>
                <li>¥<input type="text" name="price" value="24.00" id="erqian"></li>
                <li>
                    <p onclick="shan()">移入收藏</p>
                    <p onclick="shan()">删除</p>
                </li>
            </ul>
            <ol>
                <li id="totalPrice"> 0.00</li>
                <li><span onclick="jie()">结 算</span></li>
            </ol>
        </div>
    </div>

</body>
<script>
    var price = 0.00;
    var price1 = 0.00;
    var price2 = 0.00;

    function jian() {
        var i = parseInt(document.getElementById("shang").valueOf().value) - 1;
        if (i <= 0) {
            i = 0;
        }
        document.getElementById("shang").valueOf().value = i;
        price1 = 21.90 * i;
        document.getElementById("yiqian").value = suan(price1);
        zong();
    }
    function jia() {
        var i = parseInt(document.getElementById("shang").valueOf().value) + 1;
        document.getElementById("shang").valueOf().value = i;
        price1 = 21.90 * i;
        document.getElementById("yiqian").value = suan(price1);
        zong();
    }
    function jian1() {
        var i = parseInt(document.getElementById("shang1").valueOf().value) - 1;
        if (i <= 0) {
            i = 0;
        }
        document.getElementById("shang1").valueOf().value = i;
        price2 = 24.00 * i;
        document.getElementById("erqian").value = suan(price2);
        zong();
    }
    function jia1() {
        var i = parseInt(document.getElementById("shang1").valueOf().value) + 1;
        document.getElementById("shang1").valueOf().value = i;
        price2 = 24.00 * i;
        document.getElementById("erqian").value = suan(price2);
        zong();
    }

    function suan(number) {
        price = price1 + price2;
        if (isNaN(number)) {
            return false;
        }
        number = Math.round(number * 100) / 100;
        var s = number.toString();
        var rs = s.indexOf(".");
        if (rs < 0) {
            rs = s.length;
            s += ".";
        }
        while (s.length <= rs + 2) {
            s += "0";
        }
        return s;
    }
    function zong() {
        price = price1 + price2;
        if (isNaN(price)) {
            return false;
        }
        price = Math.round(price * 100) / 100;
        var s = price.toString();
        var rs = s.indexOf(".");
        if (rs < 0) {
            rs = s.length;
            s += ".";
        }
        while (s.length <= rs + 2) {
            s += "0";
        }
        document.getElementById("totalPrice").innerHTML = s;
    }




</script>

</html>